<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>神灯速贸</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="msapplication-tap-highlight" content="no"/>
        <link rel="stylesheet" href="../css/animate.css">
        <link rel="stylesheet" href="../css/public.css">
        <link rel="stylesheet" href="../css/pull.css">
        <link rel="stylesheet" href="../css/main.css">
        <script src="../js/zepto.min.js"></script>
        <script src="../js/iscroll.js"></script>
        <script src="../js/main.js"></script>
        <script src="../js/iscroll_constructor.js"></script>
    </head>
    <body>
        <header class="header" style="display: block;">
            <div class="title">店铺管理</div>
            <a class="btn-back" href="#"><span>我</span></a>
            <a class="head-btn-right btn-server" href="#">搜索</a>
        </header>

        <div class="container store-page">
        	<div class="store-head clearfix">
        		<div class="store-img">
        			<img class="hpimg" src="../images/ico_logo_fruitday.png">
        		</div>
        		<div class="store-wrapper">
        			<div class="store-name">阿里水果旗舰店<span>已认证</span></div>
        			<div class="campany-name">满洲阿拉丁贸易有限公司</div>
        		</div>
        	</div>
            <nav id="nav-index" class="selected1" data-active="1">
                <ul>
                  <li><a class="active" href="#">售卖中(<span id="sell-nb">1</span>)</a></li>
                  <li><a href="#">仓库中(<span id="store-nb">1</span>)</a></li>
                </ul>
                <div class="active-bar"></div>
            </nav>
            
            <div id="page1-wrapper" class="scroll-wrapper animated active">
                <div id="scroller1" class="scroler">

                    <div id="page1-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page1-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>

                    <ul class="pt-list">
                        <li class="clearfix">
                            <a href="#">
                                <div class="pt-img">
                                    <img class="hpimg" src="../images/p_img2.jpg">    
                                </div>
                                <div class="pt-details">
                                    <div class="name my-ellipsis">山东红富士苹果</div>
                                    <div class="my-ellipsis">价格：<span>$42/kg</span></div>
                                    <div class="my-ellipsis">起订量：<span class="">5000kg</span></div>
                                    <div class="my-ellipsis">交货地：<span class="">伊尔库茨克</span></div>
                                </div>   
                            </a>
                            <div class="action-wrapper table">
                                <a class="action1 cell" href="#">商品编辑</a>
                                <a class="action2 cell" href="#">下架</a>
                                <a class="action3 cell" href="#">删除</a>
                            </div> 
                        </li>
                        <li class="clearfix">
                            <a href="#">
                                <div class="pt-img">
                                    <img class="hpimg" src="../images/p_img2.jpg">    
                                </div>
                                <div class="pt-details">
                                    <div class="name my-ellipsis">山东红富士苹果</div>
                                    <div class="my-ellipsis">价格：<span>$42/kg</span></div>
                                    <div class="my-ellipsis">起订量：<span class="">5000kg</span></div>
                                    <div class="my-ellipsis">交货地：<span class="">伊尔库茨克</span></div>
                                </div>   
                            </a>
                            <div class="action-wrapper table">
                                <a class="action1 cell" href="#">商品编辑</a>
                                <a class="action2 cell" href="#">下架</a>
                                <a class="action3 cell" href="#">删除</a>
                            </div> 
                        </li>
                        <li class="clearfix">
                            <a href="#">
                                <div class="pt-img">
                                    <img class="hpimg" src="../images/p_img2.jpg">    
                                </div>
                                <div class="pt-details">
                                    <div class="name my-ellipsis">山东红富士苹果</div>
                                    <div class="my-ellipsis">价格：<span>$42/kg</span></div>
                                    <div class="my-ellipsis">起订量：<span class="">5000kg</span></div>
                                    <div class="my-ellipsis">交货地：<span class="">伊尔库茨克</span></div>
                                </div>   
                            </a>
                            <div class="action-wrapper table">
                                <a class="action1 cell" href="#">商品编辑</a>
                                <a class="action2 cell" href="#">下架</a>
                                <a class="action3 cell" href="#">删除</a>
                            </div> 
                        </li>
                    </ul>

                    <div id="page1-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page1-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>

                </div>
            </div>

            <div id="page2-wrapper" class="scroll-wrapper animated ">
                <div id="scroller2" class="scroller">

                    <div id="page2-pull-down" class="pull-down">
                        <span class="pull-down-icon"></span>
                        <span id="page2-pull-down-label" class="pull-down-label">下拉刷新...</span>
                    </div>
                    <ul class="pt-list">
                        <li class="clearfix">
                            <a href="#">
                                <div class="pt-img">
                                    <img class="hpimg" src="../images/p_img2.jpg">    
                                </div>
                                <div class="pt-details">
                                    <div class="name my-ellipsis">山东红富士苹果</div>
                                    <div class="my-ellipsis">价格：<span>$42/kg</span></div>
                                    <div class="my-ellipsis">起订量：<span class="">5000kg</span></div>
                                    <div class="my-ellipsis">交货地：<span class="">伊尔库茨克</span></div>
                                </div>   
                            </a>
                            <div class="action-wrapper table">
                                <a class="action cell" href="#">商品编辑</a>
                                <a class="action cell" href="#">上架</a>
                                <a class="action cell" href="#">删除</a>
                            </div>
                        </li>
                    </ul>    
                    <div id="page2-pull-up" class="pull-up">
                        <span class="pull-up-icon"></span>
                        <span id="page2-pull-up-label"  class="pull-up-label">上拉加载更多...</span>
                    </div>
                </div>
            </div>

            <div class="btn-bottom-wrapper">
                <a class="btn-bottom-submit" href="#">新增商品</a>
            </div>
        </div>

        

        <script>
            $(function(){
                $("#nav-index li a").tap(function(e){
                    e.preventDefault();
                    
                    var lastIndex = $("#nav-index").attr("data-active");
                    var index =  $(this).parent().index() + 1;
                    if(lastIndex != index) {
                        $("#nav-index").removeAttr("class");
                        $("#nav-index").addClass("selected" + index);
                        $("#nav-index").attr("data-active", index);
                        $(".scroll-wrapper").removeClass("slideInRight slideInLeft slideOutRight slideOutLeft");
                        if(index < lastIndex) {
                            $("#page" + lastIndex + "-wrapper").addClass("slideOutRight");
                            $("#page" + index + "-wrapper").addClass("slideInLeft active");
                        } else { 
                            $("#page" + lastIndex + "-wrapper").addClass("slideOutLeft");
                            $("#page" + index + "-wrapper").addClass("slideInRight active");
                        }

                        setTimeout(function(){
                            $("#page" + lastIndex + "-wrapper").removeClass("active");
                        },500)
                    }
                })

                $(".action3").tap(function(e){
                    e.preventDefault();
                    $(this).parent().parent().remove();
                })
            });
            // page1 下拉刷新
            function p1PullDown() {
                console.log("p1PullDown");
                // window.location.reload();
            }
            // page2 上拉加载更多
            function p1PullUp() {
                console.log("p1PullUp");
                // $.getJSON("p1PullDown", function (data) {
                    
                // });
            }

            // page2 下拉刷新
            function p2PullDown() {
                console.log("p2PullDown");
                // window.location.reload();
            }
            // page2 上拉加载更多
            function p2PullUp() {
                console.log("p2PullUp");
                // $.getJSON("p2PullDown", function (data) {
                    
                // });
            }

            var contentHeight = $(".store-page").height() - 44 -70 - 62;
            $(".scroll-wrapper").height(contentHeight);

            var scroll1, scroll2;
           
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', function(){
                scroll1 = new Scroll();
                scroll2 = new Scroll();
                scroll1.loaded('page1', p1PullDown, p1PullUp);
                scroll2.loaded('page2', p2PullDown, p2PullUp);
            }, false);

        </script>
        
    </body>
</html>